import React, { useState, useEffect } from 'react'
import { getHospitalById } from "@/api/hosp";
import { useLocation, useParams, useNavigate } from "react-router-dom";
import { Descriptions, Card, Space, Button } from "antd";
import { useAppDispatch } from "@/hooks";
import { changeTitleByKey, delPanesByKey } from "@/store/slice/common";
const Show = () => {
  const dispatch = useAppDispatch()
  const location = useLocation();
  const navigate = useNavigate();
  const { id } = useParams();

  const [info, setInfo] = useState<any>({
    hospital: {
      param: {}
    },
    bookingRule: {
      rule: [] // 一定是数组
    }
  })

  useEffect(() => {
    getHospitalById(id as string).then(result => {
      console.log(result);
      setInfo(result.data)


      dispatch(changeTitleByKey({
        key: location.pathname,
        title: result.data.hospital.hosname + "详情"
      }))

    })
  }, [])



  return (
    <Space direction={"vertical"}>
      <Button onClick={() => {
        dispatch(delPanesByKey(location.pathname));
        navigate("/hospital/hospitalList")
      }} danger type={"primary"}>关闭并返回</Button>
      <Card>
        <Descriptions column={2} title="医院基本信息" bordered>
          <Descriptions.Item label="医院名称">{info.hospital.hosname}</Descriptions.Item>
          <Descriptions.Item label="医院LOGO">{
            info.hospital.logoData && <img width={100} src={"data:image/png;base64," + info.hospital.logoData} alt="" />
          }</Descriptions.Item>
          <Descriptions.Item label="医院编码">{info.hospital.hoscode}</Descriptions.Item>
          <Descriptions.Item label="医院地址">{info.hospital.param.fullAddress}</Descriptions.Item>
          <Descriptions.Item label="乘车路线" span={2}>{info.hospital.route}</Descriptions.Item>
          <Descriptions.Item label="医院介绍" span={2}>{info.hospital.intro}</Descriptions.Item>

        </Descriptions>
      </Card>

      <Card>
        <Descriptions column={2} title="医院预约规则信息" bordered>
          <Descriptions.Item label="预约周期">{info.bookingRule.cycle}</Descriptions.Item>
          <Descriptions.Item label="发号时间">{info.bookingRule.releaseTime}</Descriptions.Item>
          <Descriptions.Item label="停号时间">{info.bookingRule.stopTime}</Descriptions.Item>
          <Descriptions.Item label="退号时间">{info.bookingRule.quitTime}</Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>{
            info.bookingRule.rule.map((v: any, index: number) => (
              <p key={index}>{v}</p>
            ))
          }</Descriptions.Item>
        </Descriptions>
      </Card>





    </Space>
  )
}

export default Show